import React from "react";
import { Button, Layout, Avatar, Dropdown } from 'antd';
import './index.css'
import { MenuFoldOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux'
import { collapseMenu } from '../../store/reducer/tab'
const { Header } = Layout;
const CommonHeader = ({ collapsed }) => {
    const items = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" >
                    个人中心
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={() => { logout() }}>
                    退出
                </a>
            )
        },
    ];
    const dispatch = useDispatch()
    const logout = () => {

    }
    const handleColl = () => {
        dispatch(collapseMenu())
    }
    return (
        <Header className="header-container">
            <Button
                icon={<MenuFoldOutlined />}
                type="text"
                onClick={() => { handleColl() }}
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 32,
                    backgroundColor: '#fff'
                }}
            />
            <Dropdown menu={{ items }}>
                <Avatar size={36} src={<img src={require('../../assets/images/user.png')} />} />
            </Dropdown>

        </Header>
    )
}
export default CommonHeader